<template>
    <el-card class="product-card" shadow="hover">
        <div class="product-image-container">
            <img :src="product.imageUrl" :alt="product.name" class="product-image" />
            <div class="product-badges">
                <el-tag v-if="product.isHot" type="danger" size="small">热门</el-tag>
                <el-tag v-if="product.status === 0" type="success" size="small">有库存</el-tag>
                <el-tag v-else type="info" size="small">缺货</el-tag>
            </div>
        </div>

        <div class="product-info">
            <h3 class="product-name" :title="product.name">{{ product.name }}</h3>
            <p class="product-description" :title="product.description">{{ product.description }}</p>

            <div class="product-footer">
                <div class="product-points">
                    <span class="points-value">{{ product.point }}</span>
                    <span class="points-unit">积分</span>
                </div>

                <div class="product-actions">
                    <el-button type="primary" size="small" @click="handleAddToCart" :disabled="!canAddToCart"
                        :loading="adding">
                        {{ buttonText }}
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import type { Product } from '@/types'

interface Props {
    product: Product
}

const props = defineProps<Props>()
const router = useRouter()

const userStore = useUserStore()
const cartStore = useCartStore()

const adding = ref(false)

// 导航到详情页
const goToDetail = () => {
    router.push({ name: 'ProductDetail', params: { id: props.product.id } })
}

// 是否可以添加到购物车
const canAddToCart = computed(() => {
    return userStore.isAuthenticated && props.product.status === 0
})

// 按钮文本
const buttonText = computed(() => {
    if (!userStore.isAuthenticated) {
        return '请先登录'
    }
    if (props.product.status !== 0) {
        return '缺货'
    }
    if (cartStore.isInCart(props.product.id)) {
        return '已在购物车'
    }
    return '加入购物车'
})

// 处理添加到购物车
const handleAddToCart = async (event: MouseEvent) => {
    event.stopPropagation() // 阻止事件冒泡到卡片点击
    if (!canAddToCart.value) {
        if (!userStore.isAuthenticated) {
            ElMessage.warning('请先登录')
        }
        return
    }

    try {
        adding.value = true
        cartStore.addToCart(props.product)
    } catch (error) {
        console.error('添加到购物车失败:', error)
    } finally {
        adding.value = false
    }
}
</script>

<style scoped>
.product-card {
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image-container {
    position: relative;
    margin-bottom: 15px;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.product-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-info {
    padding: 0 10px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-points {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.points-value {
    font-size: 18px;
    font-weight: 600;
    color: #e6a23c;
}

.points-unit {
    font-size: 12px;
    color: #999;
}

.product-actions {
    flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .product-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .product-actions {
        width: 100%;
    }

    .product-actions .el-button {
        width: 100%;
    }
}
</style>
